<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/dev/semantics-other.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:36:28 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard, Edition for Web Developers</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  <script async="" src=search.js></script>
  
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   
   <hgroup><h1><a rel=home href=index.html>HTML: The Living Standard</a></h1><p id=dev-edition-h2>Edition for Web Developers — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   

   <div id=search>
    <input placeholder="Search. Press '/'" autocomplete=off name=query id=query type=search>
    <ol id=results></ol>
   </div>
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=custom-elements.html>← 4.13 Custom elements</a> — <a href=index.html>Table of Contents</a> — <a href=microdata.html>5 Microdata →</a></nav><ol class=toc><li><ol><li><a href=semantics-other.html#common-idioms><span class=secno>4.14</span> Common idioms without dedicated elements</a><ol><li><a href=semantics-other.html#rel-up><span class=secno>4.14.1</span> Breadcrumb navigation</a><li><a href=semantics-other.html#tag-clouds><span class=secno>4.14.2</span> Tag clouds</a><li><a href=semantics-other.html#conversations><span class=secno>4.14.3</span> Conversations</a><li><a href=semantics-other.html#footnotes><span class=secno>4.14.4</span> Footnotes</a></ol><li><a href=semantics-other.html#disabled-elements><span class=secno>4.15</span> Disabled elements</a></ol></ol><h3 id=common-idioms><span class=secno>4.14</span> Common idioms without dedicated elements<a href=#common-idioms class=self-link></a></h3>

  <h4 id=rel-up><span class=secno>4.14.1</span> Breadcrumb navigation<a href=#rel-up class=self-link></a></h4>

  <p>This specification does not provide a machine-readable way of describing breadcrumb navigation
  menus. Authors are encouraged to just use a series of links in a paragraph. The <code id=rel-up:the-nav-element><a href=sections.html#the-nav-element>nav</a></code>
  element can be used to mark the section containing these paragraphs as being navigation
  blocks.</p>

  

  <div class=example>

   <p>In the following example, the current page can be reached via two paths.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>nav</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/&quot;</c-><c- p>&gt;</c->Main<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> ▸
  <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/products/&quot;</c-><c- p>&gt;</c->Products<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> ▸
  <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/products/dishwashers/&quot;</c-><c- p>&gt;</c->Dishwashers<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> ▸
  <c- p>&lt;</c-><c- f>a</c-><c- p>&gt;</c->Second hand<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/&quot;</c-><c- p>&gt;</c->Main<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> ▸
  <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/second-hand/&quot;</c-><c- p>&gt;</c->Second hand<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> ▸
  <c- p>&lt;</c-><c- f>a</c-><c- p>&gt;</c->Dishwashers<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>nav</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h4 id=tag-clouds><span class=secno>4.14.2</span> Tag clouds<a href=#tag-clouds class=self-link></a></h4>

  <p id=tag-cloud>This specification does not define any markup specifically for marking up lists
  of keywords that apply to a group of pages (also known as <i>tag clouds</i>). In general, authors
  are encouraged to either mark up such lists using <code id=tag-clouds:the-ul-element><a href=grouping-content.html#the-ul-element>ul</a></code> elements with explicit inline
  counts that are then hidden and turned into a presentational effect using a style sheet, or to use
  SVG.</p>

  <div class=example>

   <p>Here, three tags are included in a short tag cloud:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>style</c-><c- p>&gt;</c->
<c- p>.</c-><c- nc>tag-cloud</c-> <c- o>&gt;</c-> <c- f>li</c-> <c- o>&gt;</c-> <c- f>span</c-> <c- p>{</c-> <c- k>display</c-><c- p>:</c-> <c- kc>none</c-><c- p>;</c-> <c- p>}</c->
<c- p>.</c-><c- nc>tag-cloud</c-> <c- o>&gt;</c-> <c- f>li</c-> <c- p>{</c-> <c- k>display</c-><c- p>:</c-> <c- kc>inline</c-><c- p>;</c-> <c- p>}</c->
<c- p>.</c-><c- nc>tag-cloud-1</c-> <c- p>{</c-> <c- k>font-size</c-><c- p>:</c-> <c- mf>0.7</c-><c- b>em</c-><c- p>;</c-> <c- p>}</c->
<c- p>.</c-><c- nc>tag-cloud-2</c-> <c- p>{</c-> <c- k>font-size</c-><c- p>:</c-> <c- mf>0.9</c-><c- b>em</c-><c- p>;</c-> <c- p>}</c->
<c- p>.</c-><c- nc>tag-cloud-3</c-> <c- p>{</c-> <c- k>font-size</c-><c- p>:</c-> <c- mf>1.1</c-><c- b>em</c-><c- p>;</c-> <c- p>}</c->
<c- p>.</c-><c- nc>tag-cloud-4</c-> <c- p>{</c-> <c- k>font-size</c-><c- p>:</c-> <c- mf>1.3</c-><c- b>em</c-><c- p>;</c-> <c- p>}</c->
<c- p>.</c-><c- nc>tag-cloud-5</c-> <c- p>{</c-> <c- k>font-size</c-><c- p>:</c-> <c- mf>1.5</c-><c- b>em</c-><c- p>;</c-> <c- p>}</c->

<c- p>@</c-><c- k>media</c-> <c- f>speech</c-> <c- p>{</c->
  <c- p>.</c-><c- nc>tag-cloud</c-> <c- o>&gt;</c-> <c- f>li</c-> <c- o>&gt;</c-> <c- f>span</c-> <c- p>{</c-> <c- k>display</c-><c- p>:</c-><c- kc>inline</c-> <c- p>}</c->
<c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>&gt;</c->
...
<c- p>&lt;</c-><c- f>ul</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;tag-cloud&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;tag-cloud-4&quot;</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;28 instances&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/t/apple&quot;</c-><c- p>&gt;</c->apple<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>span</c-><c- p>&gt;</c->(popular)<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;tag-cloud-2&quot;</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;6 instances&quot;</c->  <c- e>href</c-><c- o>=</c-><c- s>&quot;/t/kiwi&quot;</c-><c- p>&gt;</c->kiwi<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>span</c-><c- p>&gt;</c->(rare)<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;tag-cloud-5&quot;</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;41 instances&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/t/pear&quot;</c-><c- p>&gt;</c->pear<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>span</c-><c- p>&gt;</c->(very popular)<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c-></code></pre>

   <p>The actual frequency of each tag is given using the <code id=tag-clouds:attr-title><a href=dom.html#attr-title>title</a></code>
   attribute. A CSS style sheet is provided to convert the markup into a cloud of differently-sized
   words, but for user agents that do not support CSS or are not visual, the markup contains
   annotations like "(popular)" or "(rare)" to categorize the various tags by frequency, thus
   enabling all users to benefit from the information.</p>

   <p>The <code id=tag-clouds:the-ul-element-2><a href=grouping-content.html#the-ul-element>ul</a></code> element is used (rather than <code id=tag-clouds:the-ol-element><a href=grouping-content.html#the-ol-element>ol</a></code>) because the order is not
   particularly important: while the list is in fact ordered alphabetically, it would convey the
   same information if ordered by, say, the length of the tag.</p>

   <p>The <code id=tag-clouds:link-type-tag><a href=links.html#link-type-tag>tag</a></code> <code id=tag-clouds:attr-hyperlink-rel><a href=links.html#attr-hyperlink-rel>rel</a></code>-keyword is
   <em>not</em> used on these <code id=tag-clouds:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> elements because they do not represent tags that apply
   to the page itself; they are just part of an index listing the tags themselves.</p>

  </div>


  <h4 id=conversations><span class=secno>4.14.3</span> Conversations<a href=#conversations class=self-link></a></h4>

  

  <p>This specification does not define a specific element for marking up conversations, meeting
  minutes, chat transcripts, dialogues in screenplays, instant message logs, and other situations
  where different players take turns in discourse.</p>

  <p>Instead, authors are encouraged to mark up conversations using <code id=conversations:the-p-element><a href=grouping-content.html#the-p-element>p</a></code> elements and
  punctuation. Authors who need to mark the speaker for styling purposes are encouraged to use
  <code id=conversations:the-span-element><a href=text-level-semantics.html#the-span-element>span</a></code> or <code id=conversations:the-b-element><a href=text-level-semantics.html#the-b-element>b</a></code>. Paragraphs with their text wrapped in the <code id=conversations:the-i-element><a href=text-level-semantics.html#the-i-element>i</a></code>
  element can be used for marking up stage directions.</p>

  <div class=example>

   <p>This example demonstrates this using an extract from Abbot and Costello's famous sketch,
   <cite>Who's on first</cite>:</p>

<pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> Costello: Look, you gotta first baseman?
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> Abbott: Certainly.
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> Costello: Who&apos;s playing first?
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> Abbott: That&apos;s right.
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> Costello becomes exasperated.
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> Costello: When you pay off the first baseman every month, who gets the money?
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> Abbott: Every dollar of it.</code></pre>

  </div>

  <div class=example>

   <p>The following extract shows how an IM conversation log could be marked up, using the
   <code id=conversations:the-data-element><a href=text-level-semantics.html#the-data-element>data</a></code> element to provide Unix timestamps for each line. Note that the timestamps are
   provided in a format that the <code id=conversations:the-time-element><a href=text-level-semantics.html#the-time-element>time</a></code> element does not support, so the
   <code id=conversations:the-data-element-2><a href=text-level-semantics.html#the-data-element>data</a></code> element is used instead (namely, Unix <code>time_t</code> timestamps).
   Had the author wished to mark up the data using one of the date and time formats supported by the
   <code id=conversations:the-time-element-2><a href=text-level-semantics.html#the-time-element>time</a></code> element, that element could have been used instead of <code id=conversations:the-data-element-3><a href=text-level-semantics.html#the-data-element>data</a></code>. This
   could be advantageous as it would allow data analysis tools to detect the timestamps
   unambiguously, without coordination with the page author.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>data</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;1319898155&quot;</c-><c- p>&gt;</c->14:22<c- p>&lt;/</c-><c- f>data</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->egof<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c-> I&apos;m not that nerdy, I&apos;ve only seen 30% of the star trek episodes
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>data</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;1319898192&quot;</c-><c- p>&gt;</c->14:23<c- p>&lt;/</c-><c- f>data</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->kaj<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c-> if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>data</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;1319898200&quot;</c-><c- p>&gt;</c->14:23<c- p>&lt;/</c-><c- f>data</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->egof<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c-> it&apos;s unarguably
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>data</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;1319898228&quot;</c-><c- p>&gt;</c->14:23<c- p>&lt;/</c-><c- f>data</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>i</c-><c- p>&gt;</c->* kaj blinks<c- p>&lt;/</c-><c- f>i</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>data</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;1319898260&quot;</c-><c- p>&gt;</c->14:24<c- p>&lt;/</c-><c- f>data</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->kaj<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c-> you are not helping your case</code></pre>
   

  </div>

  <div class=example>

   <p>HTML does not have a good way to mark up graphs, so descriptions of interactive conversations
   from games are more difficult to mark up. This example shows one possible convention using
   <code id=conversations:the-dl-element><a href=grouping-content.html#the-dl-element>dl</a></code> elements to list the possible responses at each point in the conversation.
   Another option to consider is describing the conversation in the form of a DOT file, and
   outputting the result as an SVG image to place in the document. <a href=references.html#refsDOT>[DOT]</a></p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> Next, you meet a fisher. You can say one of several greetings:
<c- p>&lt;</c-><c- f>dl</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;Hello there!&quot;
 <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> She responds with &quot;Hello, how may I help you?&quot;; you can respond with:
  <c- p>&lt;</c-><c- f>dl</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;I would like to buy a fish.&quot;
   <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> She sells you a fish and the conversation finishes.
   <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;Can I borrow your boat?&quot;
   <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> She is surprised and asks &quot;What are you offering in return?&quot;.
    <c- p>&lt;</c-><c- f>dl</c-><c- p>&gt;</c->
     <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;Five gold.&quot; (if you have enough)
     <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;Ten gold.&quot; (if you have enough)
     <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;Fifteen gold.&quot; (if you have enough)
     <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> She lends you her boat. The conversation ends.
     <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;A fish.&quot; (if you have one)
     <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;A newspaper.&quot; (if you have one)
     <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;A pebble.&quot; (if you have one)
     <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> &quot;No thanks&quot;, she replies. Your conversation options
     at this point are the same as they were after asking to borrow
     her boat, minus any options you&apos;ve suggested before.
    <c- p>&lt;/</c-><c- f>dl</c-><c- p>&gt;</c->
   <c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>dl</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;Vote for me in the next election!&quot;
 <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> She turns away. The conversation finishes.
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;Madam, are you aware that your fish are running away?&quot;
 <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> She looks at you skeptically and says &quot;Fish cannot run, miss&quot;.
  <c- p>&lt;</c-><c- f>dl</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;You got me!&quot;
   <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> The fisher sighs and the conversation ends.
   <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;Only kidding.&quot;
   <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> &quot;Good one!&quot; she retorts. Your conversation options at this
   point are the same as those following &quot;Hello there!&quot; above.
   <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> &quot;Oh, then what are they doing?&quot;
   <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> She looks at her fish, giving you an opportunity to steal
   her boat, which you do. The conversation ends.
  <c- p>&lt;/</c-><c- f>dl</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>dl</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>In some games, conversations are simpler: each character merely has a fixed set of lines that
   they say. In this example, a game FAQ/walkthrough lists some of the known possible responses for
   each character:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>section</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Dialogue<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>small</c-><c- p>&gt;</c->Some characters repeat their lines in order each time you interact
 with them, others randomly pick from amongst their lines. Those who respond in
 order have numbered entries in the lists below.<c- p>&lt;/</c-><c- f>small</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->The Shopkeeper<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>ul</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->How may I help you?
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->Fresh apples!
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->A loaf of bread for madam?
 <c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->The pilot<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Before the accident:
 <c- p>&lt;</c-><c- f>ul</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->I&apos;m about to fly out, sorry!
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->Sorry, I&apos;m just waiting for flight clearance and then I&apos;ll be off!
 <c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->After the accident:
 <c- p>&lt;</c-><c- f>ol</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->I&apos;m about to fly out, sorry!
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->Ok, I&apos;m not leaving right now, my plane is being cleaned.
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->Ok, it&apos;s not being cleaned, it needs a minor repair first.
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->Ok, ok, stop bothering me! Truth is, I had a crash.
 <c- p>&lt;/</c-><c- f>ol</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->Clan Leader<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->During the first clan meeting:
 <c- p>&lt;</c-><c- f>ul</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->Hey, have you seen my daughter? I bet she&apos;s up to something nefarious again...
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->Nice weather we&apos;re having today, eh?
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->The name is Bailey, Jeff Bailey. How can I help you today?
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->A glass of water? Fresh from the well!
 <c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->After the earthquake:
 <c- p>&lt;</c-><c- f>ol</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->Everyone is safe in the shelter, we just have to put out the fire!
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->I&apos;ll go and tell the fire brigade, you keep hosing it down!
 <c- p>&lt;/</c-><c- f>ol</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>section</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h4 id=footnotes><span class=secno>4.14.4</span> Footnotes<a href=#footnotes class=self-link></a></h4>

  <p>HTML does not have a dedicated mechanism for marking up footnotes. Here are the suggested
  alternatives.</p>

  <hr>

  <p>For short inline annotations, the <code id=footnotes:attr-title><a href=dom.html#attr-title>title</a></code> attribute could  be used.</p>

  <div class=example>

   <p>In this example, two parts of a dialogue are annotated with footnote-like content using the
   <code id=footnotes:attr-title-2><a href=dom.html#attr-title>title</a></code> attribute.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->Customer<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c->: Hello! I wish to register a complaint. Hello. Miss?
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->Shopkeeper<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c->: <strong><c- p>&lt;</c-><c- f>span</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;Colloquial pronunciation of &apos;What do you&apos;&quot;</c-></strong>
<c- p>&gt;</c->Watcha<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c-> mean, miss?
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->Customer<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c->: Uh, I&apos;m sorry, I have a cold. I wish to make a complaint.
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->Shopkeeper<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c->: Sorry, <c- p>&lt;</c-><c- f>span</c-> <strong><c- e>title</c-><c- o>=</c-><c- s>&quot;This is, of course, a lie.&quot;</c-></strong><c- p>&gt;</c->we&apos;re
closing for lunch<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->.</code></pre>

  </div>

  
  <p class=note>Unfortunately, relying on the <code id=footnotes:attr-title-3><a href=dom.html#attr-title>title</a></code> attribute is
  currently discouraged as many user agents do not expose the attribute in an accessible manner as
  required by this specification (e.g. requiring a pointing device such as a mouse to cause a
  tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a
  modern phone or tablet).</p>

  <p class=note>If the <code id=footnotes:attr-title-4><a href=dom.html#attr-title>title</a></code> attribute is used, CSS can be used to
  draw the reader's attention to the elements with the attribute.</p>

  <div class=example>

   <p>For example, the following CSS places a dashed line below elements that have a <code id=footnotes:attr-title-5><a href=dom.html#attr-title>title</a></code> attribute.</p>

   <pre><code class='css'><c- f>[title] </c-><c- p>{</c-> <c- k>border-bottom</c-><c- p>:</c-> thin dashed<c- p>;</c-> <c- p>}</c-></code></pre>

  </div>

  <hr>

  <p>For longer annotations, the <code id=footnotes:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> element should be used, pointing to an element later
  in the document. The convention is that the contents of the link be a number in square
  brackets.</p>

  <div class=example>

   <p>In this example, a footnote in the dialogue links to a paragraph below the dialogue. The
   paragraph then reciprocally links back to the dialogue, allowing the user to return to the
   location of the footnote.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> Announcer: Number 16: The <c- p>&lt;</c-><c- f>i</c-><c- p>&gt;</c->hand<c- p>&lt;/</c-><c- f>i</c-><c- p>&gt;</c->.
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> Interviewer: Good evening. I have with me in the studio tonight
Mr Norman St John Polevaulter, who for the past few years has been
contradicting people. Mr Polevaulter, why <c- p>&lt;</c-><c- f>em</c-><c- p>&gt;</c->do<c- p>&lt;/</c-><c- f>em</c-><c- p>&gt;</c-> you
contradict people?
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> Norman: I don&apos;t. <c- p>&lt;</c-><c- f>sup</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;#fn1&quot;</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;r1&quot;</c-><c- p>&gt;</c->[1]<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>sup</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> Interviewer: You told me you did!
<em>...</em>
<c- p>&lt;</c-><c- f>section</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;fn1&quot;</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;#r1&quot;</c-><c- p>&gt;</c->[1]<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> This is, naturally, a lie,
 but paradoxically if it were true he could not say so without
 contradicting the interviewer and thus making it false.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>section</c-><c- p>&gt;</c-></code></pre>

  </div>

  <hr>

  <p>For side notes, longer annotations that apply to entire sections of the text rather than just
  specific words or sentences, the <code id=footnotes:the-aside-element><a href=sections.html#the-aside-element>aside</a></code> element should be used.</p>

  <div class=example>

   <p>In this example, a sidebar is given after a dialogue, giving it some context.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;speaker&quot;</c-><c- p>&gt;</c->Customer<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->: I will not buy this record, it is scratched.
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;speaker&quot;</c-><c- p>&gt;</c->Shopkeeper<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->: I&apos;m sorry?
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;speaker&quot;</c-><c- p>&gt;</c->Customer<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->: I will not buy this record, it is scratched.
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>span</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;speaker&quot;</c-><c- p>&gt;</c->Shopkeeper<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->: No no no, this&apos;s&apos;a tobacconist&apos;s.
<c- p>&lt;</c-><c- f>aside</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->In 1970, the British Empire lay in ruins, and foreign
 nationalists frequented the streets — many of them Hungarians
 (not the streets — the foreign nationals). Sadly, Alexander
 Yalt has been publishing incompetently-written phrase books.
<c- p>&lt;/</c-><c- f>aside</c-><c- p>&gt;</c-></code></pre>

  </div>

  <hr>

  <p>For figures or tables, footnotes can be included in the relevant <code id=footnotes:the-figcaption-element><a href=grouping-content.html#the-figcaption-element>figcaption</a></code> or
  <code id=footnotes:the-caption-element><a href=tables.html#the-caption-element>caption</a></code> element, or in surrounding prose.</p>

  <div class=example>

   <p>In this example, a  table has cells with footnotes that are given in prose. A
   <code id=footnotes:the-figure-element><a href=grouping-content.html#the-figure-element>figure</a></code> element is used to give a single legend to the combination of the table and
   its footnotes.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->Table 1. Alternative activities for knights.<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>table</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Activity
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Location
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Cost
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Dance
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Wherever possible
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> £0<c- p>&lt;</c-><c- f>sup</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;#fn1&quot;</c-><c- p>&gt;</c->1<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>sup</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Routines, chorus scenes<c- p>&lt;</c-><c- f>sup</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;#fn2&quot;</c-><c- p>&gt;</c->2<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>sup</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Undisclosed
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Undisclosed
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Dining<c- p>&lt;</c-><c- f>sup</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;#fn3&quot;</c-><c- p>&gt;</c->3<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>sup</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Camelot
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> Cost of ham, jam, and spam<c- p>&lt;</c-><c- f>sup</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;#fn4&quot;</c-><c- p>&gt;</c->4<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>sup</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;fn1&quot;</c-><c- p>&gt;</c->1. Assumed.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;fn2&quot;</c-><c- p>&gt;</c->2. Footwork impeccable.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;fn3&quot;</c-><c- p>&gt;</c->3. Quality described as &quot;well&quot;.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;fn4&quot;</c-><c- p>&gt;</c->4. A lot.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h3 id=disabled-elements><span class=secno>4.15</span> Disabled elements<a href=#disabled-elements class=self-link></a></h3>

  <p>An element is said to be <dfn id=concept-element-disabled>actually disabled</dfn> if it
  is one of the following:</p>

  <ul><li>a <code id=disabled-elements:the-button-element><a href=form-elements.html#the-button-element>button</a></code> element that is <a href=form-control-infrastructure.html#concept-fe-disabled id=disabled-elements:concept-fe-disabled>disabled</a><li>an <code id=disabled-elements:the-input-element><a href=input.html#the-input-element>input</a></code> element that is <a href=form-control-infrastructure.html#concept-fe-disabled id=disabled-elements:concept-fe-disabled-2>disabled</a><li>a <code id=disabled-elements:the-select-element><a href=form-elements.html#the-select-element>select</a></code> element that is <a href=form-control-infrastructure.html#concept-fe-disabled id=disabled-elements:concept-fe-disabled-3>disabled</a><li>a <code id=disabled-elements:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code> element that is <a href=form-control-infrastructure.html#concept-fe-disabled id=disabled-elements:concept-fe-disabled-4>disabled</a><li>an <code id=disabled-elements:the-optgroup-element><a href=form-elements.html#the-optgroup-element>optgroup</a></code> element that has a <code id=disabled-elements:attr-optgroup-disabled><a href=form-elements.html#attr-optgroup-disabled>disabled</a></code> attribute<li>an <code id=disabled-elements:the-option-element><a href=form-elements.html#the-option-element>option</a></code> element that is <a href=form-elements.html#concept-option-disabled id=disabled-elements:concept-option-disabled>disabled</a><li>a <code id=disabled-elements:the-fieldset-element><a href=form-elements.html#the-fieldset-element>fieldset</a></code> element that is a <a href=form-elements.html#concept-fieldset-disabled id=disabled-elements:concept-fieldset-disabled>disabled fieldset</a><li>a <a id=disabled-elements:form-associated-custom-element href=custom-elements.html#form-associated-custom-element>form-associated custom element</a> that is
   <a href=form-control-infrastructure.html#concept-fe-disabled id=disabled-elements:concept-fe-disabled-5>disabled</a></ul>

  <p class=note>This definition is used to determine what elements are <span>focusable</span> and
  which elements match the <code>:enabled</code> and
  <code>:disabled</code> <a href=https://drafts.csswg.org/selectors/#pseudo-class id=disabled-elements:pseudo-class data-x-internal=pseudo-class>pseudo
  classes</a>.</p>


  



  <nav><a href=custom-elements.html>← 4.13 Custom elements</a> — <a href=index.html>Table of Contents</a> — <a href=microdata.html>5 Microdata →</a></nav>
